<template>
    <div class="exclusive">
        <!-- <div class="tabs clearfix">
            <p @click="currts=3" v-bind:class="{'currt':currts==3}">奖金规则</p>
            <p @click="currts=4" v-bind:class="{'currt':currts==4}">推荐列表</p>
        </div> -->
        <div class="pool">
            <div class="top clearfix">
                <div class="lft fl">
                    <span>姓名</span>
                </div>
                <div class="lft fl">
                    <span>手机号</span>
                </div>
                <div class="lft fl">
                    <span>推荐金</span>
                </div>
                <div class="lft fl">
                    <span>日期</span>
                </div>
            </div>
            <div class="content">
                <ul>
                    <li class="clearfix" v-for="items in list">
                        <div class="lft fl">
                            <span>{{newItem(items.name)}}</span>
                        </div>
                        <div class="lft fl">
                            <span>{{items.mobile}}</span>
                        </div>
                        
                        <div class="lft fl cent">
                            <span>{{items.turnover}}</span>
                        </div>
                        <div class="lft fl">
                            <span>{{items.strOt.split(' ')[0]}}</span>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
        <!-- <div class="submitCash">
            请输入金额(元)
            <p class="inputCash">￥<input type="text" maxlength="9" v-model="postUo.balance" onkeyup="this.value= this.value.match(/\d+/) ? this.value.match(/\d+/)[0] : ''" onblur='this.value=this.value.replace(/^[0]+[0-9]*$/gi,"")'></p>
        </div> -->
        <div class="uAllprice">推荐总金额： 
            <span>{{userInfo.fixedAssets}}</span> 元
            <router-link tag="p" :to="{path:'/bonusRuler'}">奖金规则 <i class="whyicon">?</i></router-link>
            <div class="uAllpriceP">您的推荐金已成功转入余额，在“我的钱包”→“余额明细”里查看。</div>
        </div>
        <!-- <div class="cashOrToye">
            <button @click="getCash">提现</button>
            <button @click="toye">转到余额</button>
        </div> -->
    </div>
</template>

<script>
import http from "@/assets/js/axios"
import axios from 'axios'
import $ from 'jquery'
import Qs from 'qs'
import { maskTips } from '@/assets/js/dom'
export default {
    name: 'guestSpace',
    data() {
        return {
            userInfo: '',
            userToken: '',
            list: [],
            isLastPage: '',
            pgnum: 1,
            pageSize: 6,
            currts: 3,
            postUo: {
                balance: '',
            }
        }
    },
    components: {

    },
    mounted() {
        let userToken = localStorage.getItem("token") || ''
        this.userToken = userToken
        this.getUserInfo()
        this.getReason()
    },
    methods: {
        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },
        // 替换姓名
        newItem(item) {
            return `${item.substring(0, 1)}**${item.substring(item.length)}`;
        },
        // 用户信息
        getUserInfo: async function () {
            const res = await http.post('xshk/f/assets/query?token=' + this.userToken)
            if (res.data.code == -5) {
                maskTips({ id: "bal-fail-1", txt: res.data.message })
                this.$router.push('/login')
                return false;
            }
            if (res.data.code == 0) {
                this.userInfo = res.data.data
                console.log(res.data.data)
            }
        },
        // 推荐金列表
        getReason: async function () {
            let userToken = localStorage.getItem("token") || ''
            let postDo = {
                dataType: 8
            };
            const res = await http.post('xshk/f/assetsStream/queryBy?token=' + userToken, postDo)
            // console.log(res);
            if (res.data.code == -5) {
                maskTips({ id: "bal-fail-2", txt: res.data.message })
                this.$router.push('/login')
                return false
            }
            if (res.data.code == 0) {
                this.list = res.data.data
                console.log(res)
                // this.isLastPage = res.data.data.isLastPage
            }
        },
        getCash: async function(){
            let userToken = localStorage.getItem("token") || ''
            let postuoBalance = this.postUo.balance
            if(postuoBalance == ''||postuoBalance < 100){
                maskTips({id:'morethan-zero',txt:'请输入不小于100的金额'})
                return false
            }
            const res1 = await http.post('xshk/f/assets/balanceby?token=' + userToken, this.postUo)
            if(res1.data.code === 0){
                maskTips({id:'allow-succ'+ new Date().getTime(),txt:res1.data.message})
                setTimeout(()=>{
                    location.reload()
                },1000)
                
            }else{
                maskTips({id:'cant-allow'+new Date().getTime(),txt:res1.data.message})
            }
        },
        toye: async function(){
            let userToken = localStorage.getItem("token") || ''
            let postuotoye = this.postUo.balance
            if(postuotoye == ''||postuotoye <= 0){
                maskTips({id:'morethan-zero'+new data().getTime(),txt:'请输入大于0的金额'})
                return false
            }
            const res1 = await http.post('xshk/f/assets/fixedAmountToBalance?token=' + userToken, this.postUo)
            if(res1.data.code === 0){
                maskTips({id:'allow-succ'+ new Date().getTime(),txt:res1.data.message})
                setTimeout(()=>{
                    location.reload()
                },1000)
            }else{
                maskTips({id:'cant-allow'+new Date().getTime(),txt:res1.data.message})
            }
        }
    }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/css/mixins.styl';

.exclusive {
    height: 100%;

    .tabs {
        width: 100%;
        font-size: 18px;
        color: #000;
        text-align: center;

        p {
            width: 50%;
            height: 50px;
            line-height: 50px;
            float: left;
            border-bottom: 1px solid #ccc;
        }

        p:nth-child(2) {
            box-sizing: border-box;
            border-left: 1px solid #ccc;
        }

        p.currt {
            color: #8FC31F;
            // border: none;
            border-bottom: 2px solid #8FC31F;
        }
    }

    .rule {
        margin: 0 auto;

        .conts {
            margin: 15px;
            background-color: #cdedd2;

            span {
                text-indent: 35px;
                padding: 15px;
                display: block;
                font-size: 15px;
                color: #333;
                letter-spacing: 2px;
            }
        }

        .tables {
            margin: 15px;

            .top {
                background-color: #cdedd2;

                p {
                    float: left;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    width: 33.3%;
                    font-size: 16px;
                    color: #333;
                    box-sizing: border-box;
                    border: 1px solid #ccc;
                }

                p.censt {
                    border: none;
                    border-top: 1px solid #ccc;
                    border-bottom: 1px solid #ccc;
                }
            }

            .plust {
                p {
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    float: left;
                    width: 33.3%;
                    font-size: 13px;
                    color: #333;
                    border: 1px solid #ccc;
                }

                p.censt {
                    border: none;
                    border-top: 1px solid #ccc;
                    border-bottom: 1px solid #ccc;
                }

                p:nth-child(2) {
                    color: #FF9A30;
                }

                p:nth-child(3) {
                    color: #FF9A30;
                }
            }

            .button {
                p {
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    float: left;
                    width: 33.3%;
                    font-size: 13px;
                    color: #333;
                    border: 1px solid #ccc;
                }

                p.censt {
                    border: none;
                    border-top: 1px solid #ccc;
                    border-bottom: 1px solid #ccc;
                }

                p:nth-child(2) {
                    color: #ff0000;
                }

                p:nth-child(3) {
                    color: #ff0000;
                }
            }
        }

        .btn {
            margin: 15px;
            margin-top: 30px;
            height: 50px;
            line-height: 33px;
            background-color: #8fc31f;
            text-align: center;
            border-radius: 5px;

            span {
                font-size: 20px;
                color: #fff;
            }
        }
    }

    .pool {
        height 500px
        .top {
            width: 100%;
            font-size: 18px;
            color: #000;
            text-align: center;
            .lft {
                width: 25%;
                height: 50px;
                line-height: 50px;
                float: left;
                text-align: center;
                span {
                    font-size: 13px;
                }
            }
        }
        .content {
            padding-bottom 10px
            border-top 1px dashed #ccc
            margin 0 15px 0 16px
            overflow scroll 
            height 300px
            ul {
                li {
                    width: 100%;
                    font-size: 18px;
                    color: #000;
                    text-align: center;
                    border-bottom: 1px solid #ccc;
                    .lft {
                        width: 25%;
                        height: 50px;
                        line-height: 50px;
                        float: left;
                        text-align: center;

                        span {
                            font-size: 13px;
                        }
                    }
                }
            }
        }
    }
    .submitCash {
        height 88px
        margin 13px 15px 0 16px
        font-size 16px
        border-bottom 1px solid #DDDDDD
        .inputCash {
            height 28px
            margin-top 15px
            font-family PingFangSC-Regular
            font-size 22px
        }
            input {
                padding 0
                height 28px
                font-size 22px
                width 200px
            }
    }
    .uAllprice {
        padding 13px 15px 0 16px
        height 60px
        font-size 16px
        //border-bottom 1px solid #ccc
        position absolute
        bottom 50px
        border-top 0.02rem dashed #ccc
    }
    .uAllprice span{
        color #FFA201
        font-size 18px
    }
    .uAllprice p {
        width 80px
        height 20px
        font-size 14px
        float right
        color #FFA201
    }
    .uAllprice .whyicon {
        border-radius 100%
        width 16px
        height 16px
        color #fff
        background #FFA201
        text-align center
        display inline-block
    }
    .uAllprice .uAllpriceP {
        color #999
        font-size 12px
    }
    .uAllprice2 {
        margin 13px 15px 50px 16px
        height 45px
        font-size 16px
    }
    .uAllprice2 span{
        color #FFA201
        font-size 18px
    }
    .uAllprice2 p {
        width 80px
        height 20px
        font-size 14px
        float right
        color #FFA201
    }
    .uAllprice2 .whyicon {
        border-radius 100%
        width 16px
        height 16px
        color #fff
        background #FFA201
        text-align center
        display inline-block
    }
    .dl {
        position: absolute;
        display: inline-block;
        height: 1rem;
        z-index: 9;
        font-family: "PingFang-SC-Heavy";
        font-size: 0.6rem;
        line-height: 0.6rem;
        font-weight: 600;
        padding-top: 10px;
        left 12px
    }
    .box_top {
        position relative
    }
    .box_top input {
        box-sizing: border-box;
        width: 100%;
        height: 1rem;
        float: left;
        border: none;
        outline: none;
        font-size: 0.45rem;
        line-height: 0.6rem;
        font-weight: 600;
        border-bottom: 1px solid #f5f5f5;
        margin: 0 auto 0.48rem;
        font-family: "PingFang-SC-Heavy";
        position: relative;
        padding: 0 1rem;
    }
    .box_top .btbtn {
        float: left;
        width: 100%;
        height: 0.96rem;
        border: none;
        outline: none;
        background: #aad114;
        border-radius: 5px;
        color: #fff;
        margin:0.4rem 0;
        font-size: 0.37rem;
    }
    .tjj {
        font-size 18px
        color #999
        text-align center
        font-weight 600 
    }
}
.cashOrToye{
    padding 20px
    overflow hidden
}
.cashOrToye button
    background #aad001
    padding 0
    border 0
    width 100px
    height 38px
    color #fff
    border-radius 5px
.cashOrToye button:first-child
    float left
.cashOrToye button:last-child
    float right
</style>
